<template>
  <div class="home-container">
    <header class="header">
      <div class="header-content">
        <div class="logo">商城</div>
        <div class="nav-menu">
          <a href="#" class="nav-item active">精选</a>
          <a href="#" class="nav-item">鞋类</a>
          <a href="#" class="nav-item">潮服</a>
          <a href="#" class="nav-item">数码</a>
          <a href="#" class="nav-item">美妆</a>
          <a href="#" class="nav-item">家居</a>
          <a href="#" class="nav-item">手表</a>
          <a href="#" class="nav-item">包袋</a>
          <a href="#" class="nav-item">配饰</a>
          <a href="#" class="nav-item">潮玩</a>
          <a href="#" class="nav-item">女装</a>
        </div>
        <div class="user-actions">
          <span class="cart-icon" @click="$router.push('/cart')">🛒</span>
          <span class="user-icon">👤</span>
        </div>
      </div>
    </header>

    <main class="main-content">
      <div class="products-grid">
        <div class="product-card" v-for="product in products" :key="product.id">
          <img :src="product.image" :alt="product.name">
          <div class="product-info">
            <div class="product-brand">{{ product.brand }}</div>
            <h3 class="product-name">{{ product.name }}</h3>
          </div>
          <p class="price">¥{{ product.price }}</p>
          <div class="product-actions">
            <button class="review-btn" @click.stop="showReview(product)">
              ⭐ 评价
            </button>
            <button class="add-to-cart-btn" @click.stop="addToCart(product)">
              加入购物车
            </button>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import jinzhanhuaImg from '../assets/products/jinzhanhua.png'
import cpbImg from '../assets/products/CPB.png'
import nb530Img from '../assets/products/nb530.png'
import kiehlsmaskImg from '../assets/products/kiehlsmask.png'
import cpblotionImg from '../assets/products/cpblotion.png'
import dovechocolateImg from '../assets/products/dovechocolate.png'
import clarinsImg from '../assets/products/clarins.png'
import givenchyImg from '../assets/products/givenchy.png'

export default {
  name: 'HomeView',
  data() {
    return {
      products: [
        {
          id: 1,
          brand: '科颜氏',
          name: '金盏花 植萃爽肤水 收缩毛孔',
          price: 271,
          image: jinzhanhuaImg
        },
        {
          id: 2,
          brand: '品牌专供',
          name: 'CPB肌肤之钥 光采洁',
          price: 269,
          image: cpbImg
        },
        {
          id: 3,
          brand: '品牌专供',
          name: 'New Balance NB 530',
          price: 429,
          image: nb530Img
        },
        {
          id: 4,
          brand: '科颜氏',
          name: '白泥净肤面膜 舒缓提亮补水',
          price: 153,
          image: kiehlsmaskImg
        },
        {
          id: 5,
          brand: '品牌专供',
          name: 'CPB肌肤之钥 光凝润',
          price: 249,
          image: cpblotionImg
        },
        {
          id: 6,
          brand: '品牌专供',
          name: '德芙 心语巧克力礼盒',
          price: 49,
          image: dovechocolateImg
        },
        {
          id: 7,
          brand: '娇韵诗',
          name: '双萃赋活 黄金精华液 淡纹维',
          price: 412,
          image: clarinsImg
        },
        {
          id: 8,
          brand: 'GIVENCHY',
          name: '纪梵希 明星四宫格散粉',
          price: 277,
          image: givenchyImg
        }
      ]
    }
  },
  created() {
    // 将商品数据保存到 localStorage
    localStorage.setItem('products', JSON.stringify(this.products))
  },
  methods: {
    addToCart(product) {
      // 获取当前购物车
      const cart = JSON.parse(localStorage.getItem('cart') || '[]')
      // 查找商品是否已在购物车中
      const existingItem = cart.find(item => item.id === product.id)
      
      if (existingItem) {
        existingItem.quantity += 1
      } else {
        cart.push({
          ...product,
          quantity: 1
        })
      }
      
      // 保存更新后的购物车
      localStorage.setItem('cart', JSON.stringify(cart))
      alert('已添加到购物车')
    },
    showReview(product) {
      this.$router.push(`/review/${product.id}`)
    }
  }
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background: #f8f9fd;
}

.header {
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 15px 0;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #5468ff;
}

.nav-menu {
  display: flex;
  gap: 30px;
  margin: 0 auto;
}

.nav-item {
  color: #333;
  text-decoration: none;
  font-size: 16px;
  position: relative;
}

.nav-item.active {
  color: #000;
  font-weight: 500;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #000;
}

.user-actions {
  display: flex;
  gap: 20px;
  font-size: 24px;
}

.main-content {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 20px 0;
}

.product-card {
  background: white;
  padding: 0;
  border-radius: 10px;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.product-card img {
  width: 100%;
  height: 250px;
  object-fit: contain;
  object-position: center;
  background: #fff;
  transition: all 0.3s ease;
  padding: 20px;
}

.product-info {
  padding: 15px;
}

.product-brand {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.product-name {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
  font-weight: normal;
  line-height: 1.4;
  height: 2.8em;
  overflow: hidden;
}

.price {
  color: #000;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0 15px 15px;
}

.cart-icon {
  cursor: pointer;
  transition: color 0.3s ease;
}

.cart-icon:hover {
  color: #5468ff;
}

.product-actions {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  display: flex;
  gap: 10px;
  padding: 0 10px;
  transition: all 0.3s ease;
  opacity: 0;
}

.product-card:hover .product-actions {
  bottom: 10px;
  opacity: 1;
}

.add-to-cart-btn,
.review-btn {
  flex: 1;
  padding: 12px;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-to-cart-btn {
  background: #5468ff;
  color: white;
}

.review-btn {
  background: #f8f9fd;
  color: #666;
  border: 1px solid #ddd;
}

.add-to-cart-btn:hover {
  background: #4a5aff;
}

.review-btn:hover {
  background: #fff;
  border-color: #5468ff;
  color: #5468ff;
}

@media (max-width: 1200px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style> 